<!-- 试试index.vue如何识别 -->
<template>
  <div class="invoice">
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :xLength="2500"
      :defaultSelectedRowKeys="chosenIds"
      :rowSelectionSelect="rowSelectionSelect"
      :rowSelectionChange="rowSelectionChange"
      :rowSelectInvert="rowSelectInvert"
      @getDataNum="getDataNum"
      :showDataNum="true"
      @initChosenIds="initChosenIds"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="抬头类型">
            <a-select
              style="width: 200px"
              :options="headTypeList"
              v-decorator="['headType', { initialValue: '' }]"
              placeholder="请选择抬头类型"
            />
          </a-form-item>
          <a-form-item label="审核状态">
            <a-select
              style="width: 200px"
              :options="approvalStatusList"
              v-decorator="['approvalStatus', { initialValue: '' }]"
              placeholder="请选择审核状态"
            />
          </a-form-item>
          <a-form-item label="开票状态">
            <a-select
              style="width: 200px"
              :options="invoiceStatusList"
              v-decorator="['invoiceStatus', { initialValue: '' }]"
              placeholder="请选择开票状态"
            />
          </a-form-item>
          <a-form-item label="发票抬头">
            <a-input
              style="width: 200px"
              v-decorator="['buyerName']"
              placeholder="请输入发票抬头"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="开票方式">
            <a-select
              style="width: 200px"
              :options="invoiceWayList"
              v-decorator="['invoiceWay', { initialValue: '' }]"
              placeholder="请选择开票方式"
            />
          </a-form-item>
          <a-form-item label="开票申请时间">
            <fast-range-picker
              allowClear
              v-decorator="['invoiceStartTime-invoiceEndTime']"
            >
            </fast-range-picker>
          </a-form-item>
          <a-form-item label="开票人昵称">
            <a-input
              style="width: 200px"
              v-decorator="['nickName']"
              placeholder="请输入开票人昵称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="开票人电话">
            <a-input
              style="width: 200px"
              v-decorator="['phoneNumber']"
              placeholder="请输入开票人电话"
            >
            </a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <a-button
          type="primary"
          @click="togetherInvoice('more')"
          v-if="dataNum > 1"
          >合单开票</a-button
        >
      </template>
      <template slot="ImgTextTable" slot-scope="{ record }">
        <div
          v-for="(item, i) in record.orderGoodsList"
          :key="i"
          class="orderNum"
          @click="goOrderDetails(item.id)"
        >
          {{ item.orderGoodsNo }}
        </div>
      </template>

      <template slot="sendStatusTable" slot-scope="{ record }">
        <div v-if="record.invoiceStatus == 4">{{ record.failCause }}</div>
        <div v-else-if="record.invoiceStatus == 3" class="successImg">
          <div v-for="(l, i) in record.invoiceImage" :key="i" class="imgBox">
            <table-img :src="l" />
          </div>
        </div>
        <div v-else></div>
      </template>
      <template slot="statusTable" slot-scope="{ record }">
        <div @click="goCustomerDetails(record.customerId)" class="orderNum">
          {{ record.phoneNumber }}
        </div>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="reopenInvoice(record.id)"
            v-if="record.approvalStatus == 2 && record.invoiceStatus == 4"
            >重开</a
          >
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="goDetails(record.id)"
            v-if="record.approvalStatus == 1"
            >审核</a
          >
          <a
            href="javascript:;"
            class="text-primary text-danger"
            @click="goDetails(record.id)"
            >查看详情</a
          ><a
            href="javascript:;"
            class="text-primary text-danger"
            @click="openInvoiceInfo(record, 'edit')"
            v-if="
              (record.approvalStatus != 2 && record.approvalStatus != 3) ||
              (record.approvalStatus == 2 && record.invoiceStatus == 1) ||
              (record.approvalStatus == 2 && record.invoiceStatus == null)
            "
            >修改</a
          >
          <a
            href="javascript:;"
            class="text-primary text-danger"
            @click="onlyOpenInvoice([record.id], 'one')"
            v-if="
              record.approvalStatus == 2 &&
              (record.invoiceStatus == 1 || record.invoiceStatus == null)
            "
            >开票</a
          >
        </a-space>
      </template>
    </search-table>
    <!-- 修改发票信息 -->
    <InvoiceInfo
      :record="invoiceData"
      @cancel="closeInfoModal"
      :visible="invoiceInfoVisible"
      @freshTable="getInvoiceInfo"
    />
  </div>
</template>
<script>
import InvoiceInfo from "./components/InvoiceInfo";
export default {
  components: {
    InvoiceInfo,
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "table_search" }),
      url: "goldenhome/invoice/admin_/invoice/page",
      columns: [
        {
          title: "确认收货时间",
          dataIndex: "submissionDate",
          key: "submissionDate",
          align: "center",
        },
        {
          title: "申请开票时间",
          dataIndex: "createDate",
          key: "createDate",
          align: "center",
        },
        {
          title: "开票金额",
          dataIndex: "invoiceMoney",
          key: "invoiceMoney",
          align: "center",
          width: "120px",
          customRender: (text, row) => {
            return "¥ " + ((text * 1) / 10 / 10).toFixed(2);
          },
        },
        {
          title: "开票方式",
          dataIndex: "invoiceWay",
          key: "invoiceWay",
          width: "120px",
          align: "center",
          customRender: (text, row) => {
            if (text == 1) {
              text = "普通开票";
            } else if (text == 2) {
              text = "合单开票";
            } else {
              text = "普通开票";
            }
            return text;
          },
        },
        {
          title: "开票订单号",
          dataIndex: "ImgTextOperation",
          key: "ImgTextOperation",
          align: "center",
          width: "200px",
          scopedSlots: { customRender: "ImgTextOperation" },
        },
        {
          title: "开票人昵称",
          key: "nickName",
          dataIndex: "nickName",
          align: "center",
          width: "150px",
        },
        {
          title: "开票人电话",
          dataIndex: "statusOperation",
          key: "statusOperation",
          align: "center",
          width: "130px",
          scopedSlots: { customRender: "statusOperation" },
        },
        {
          title: "发票类型",
          dataIndex: "invoiceType",
          key: "invoiceType",
          width: "130px",
          align: "center",
          customRender: (text, row) => {
            return "电子普通发票";
          },
        },
        {
          title: "发票内容",
          dataIndex: "content",
          key: "content",
          width: "120px",
          align: "center",
          customRender: (text, row) => {
            if (text == 1) {
              text = "商品类型";
            } else if (text == 2) {
              text = "商品详情";
            }
            return text;
          },
        },
        {
          title: "收票人邮箱",
          dataIndex: "email",
          key: "email",
          width: "120px",
          align: "center",
          customRender: (text, row) => {
            return row.infoResponse.email;
          },
        },
        {
          title: "抬头类型",
          dataIndex: "headType",
          key: "headType",
          width: "120px",
          align: "center",
          customRender: (text, row) => {
            if (row.infoResponse.headType == 1) {
              text = "企业";
            } else {
              text = "个人";
            }
            return text;
          },
        },
        {
          title: "发票抬头",
          dataIndex: "buyerName",
          key: "buyerName",
          width: "180px",
          align: "center",
          customRender: (text, row) => {
            return row.infoResponse.buyerName;
          },
        },
        {
          title: "公司税号",
          dataIndex: "buyerTaxNum",
          key: "buyerTaxNum",
          align: "center",
          customRender: (text, row) => {
            return row.infoResponse.buyerTaxNum;
          },
        },
        {
          title: "审核状态",
          dataIndex: "approvalStatus",
          key: "approvalStatus",
          align: "center",
          customRender: (text, row) => {
            if (text == null) {
              text = "待收货";
            } else if (text == 1) {
              text = "待审核";
            } else if (text == 2) {
              text = "已通过";
            } else if (text == 3) {
              text = "拒绝";
            }
            return text;
          },
        },
        {
          title: "开票状态",
          dataIndex: "invoiceStatus",
          key: "invoiceStatus",
          align: "center",
          customRender: (text, row) => {
            if (text == 1) {
              text = "待开票";
            } else if (text == 2) {
              text = "开票中";
            } else if (text == 3) {
              text = "开票成功";
            } else if (text == 4) {
              text = "开票失败";
            } else {
              text = "————";
            }
            return text;
          },
        },
        {
          title: "失败原因/查看发票",
          dataIndex: "sendStatusTable",
          key: "sendStatusTable",
          align: "center",
          scopedSlots: { customRender: "sendStatusOperation" },
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      headTypeList: [
        { label: "全部", value: "" },
        { label: "企业", value: "1" },
        { label: "个人", value: "2" },
      ],
      approvalStatusList: [
        { label: "全部", value: "" },
        { label: "待收货", value: "0" },
        { label: "待审核", value: "1" },
        { label: "通过", value: "2" },
        { label: "拒绝", value: "3" },
      ],
      invoiceStatusList: [
        { label: "全部", value: "" },
        { label: "待开票", value: "1" },
        { label: "开票中", value: "2" },
        { label: "开票成功", value: "3" },
        { label: "开票失败", value: "4" },
      ],
      invoiceWayList: [
        { label: "全部", value: "" },
        { label: "普通开票", value: "1" },
        { label: "合单开票", value: "2" },
      ],
      invoiceInfoVisible: false,
      invoiceData: {},
      chosenIds: [], // 不同分页下被选中的表格行id集合
      allSelectedRows: [], // 不同分页下被选中的表格行
      dataNum: 0,
    };
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  mounted() {},
  methods: {
    //获取列表数据数量
    getDataNum(a) {
      this.dataNum = a || 0;
    },
    togetherInvoice(a) {
      if (this.chosenIds.length >= 2) {
        this.onlyOpenInvoice(this.chosenIds, a);
      } else {
        this.$message.warning("请至少选择两条数据后再合单开票");
      }
    },
    // 表格单行选择
    rowSelectionSelect(record, selected) {
      if (!selected) {
        this.allSelectedRows.splice(
          this.allSelectedRows.findIndex((item) => item.id == record.id),
          1
        );
        this.chosenIds.splice(
          this.chosenIds.findIndex((item) => item == record.id),
          1
        );
      }
    },
    // 表格任意行发生选择或取消选择时回调
    rowSelectionChange(selectedRowKeys, selectedRows) {
      let _this = this;
      if (selectedRows.length > 0) {
        selectedRows.forEach((item) => {
          if (!_this.chosenIds.includes(item.id)) {
            _this.chosenIds.push(item.id);
            _this.allSelectedRows.push(item);
          }
        });
        selectedRowKeys = this.chosenIds;
        this.$refs.searchtable.selectedRowKeys = this.chosenIds;
      } else {
        // this.$refs.searchtable.dataSource.forEach((dataItem) => {
        //   if (_this.chosenIds.includes(dataItem.id)) {
        //     _this.allSelectedRows.splice(
        //       _this.allSelectedRows.findIndex((item) => item.id == dataItem.id),
        //       1
        //     );
        //     _this.chosenIds.splice(
        //       _this.chosenIds.findIndex((item) => item == dataItem.id),
        //       1
        //     );
        //   }
        // });
      }
    },
    rowSelectInvert(selected, selectedRows, changeRows) {
      if (!selected) {
        let ids = [];
        changeRows.forEach((item) => {
          ids.push(item.id);
        });
        this.chosenIds = this.chosenIds.filter(function (val) {
          return ids.indexOf(val) === -1;
        });
        let arr = [];
        this.allSelectedRows.forEach((item) => {
          if (this.chosenIds.includes(item.id)) {
            arr.push(item);
          }
        });
        this.allSelectedRows = arr;
      }
    },
    //开票
    async onlyOpenInvoice(ids, a) {
      let res = await this.$post(
        "goldenhome/invoice/admin_/invoice/combined/order",
        { idList: ids }
      );
      if (res && res.returnCode == "1000") {
        this.$message.success("开票成功");
        this.getInvoiceInfo();
        if (a == "more") this.initChosenIds();
        this.$router.push({
          name: "OrderInvoice",
        });
      }
    },
    //重开发票
    async reopenInvoice(id) {
      let res = await this.$post("goldenhome/invoice/admin_/invoice/retry", {
        id: id,
      });
      if (res && res.returnCode == "1000") {
        this.$message.success("重开发票成功");
        this.$router.push({
          name: "OrderInvoice",
        });
      }
    },

    goDetails(id) {
      this.$router.push({
        name: "OrderInvoiceInvoiceDetails",
        query: {
          id: id,
        },
      });
    },
    closeInfoModal(freshTable) {
      this.invoiceInfoVisible = false;
    },
    // 打开发票信息
    openInvoiceInfo(record, handle) {
      if (handle == "edit") {
        console.log("edit", record);
        this.invoiceData = record.infoResponse || {};
        this.invoiceData.id = record.id || "";
        this.invoiceData.content = record.content || "";
        this.invoiceInfoVisible = true;
      } else if (handle == "view") {
        console.log("view");
        if (record.invoiceImage) {
          this.$info({
            title: "发票",
            okText: "关闭",
            closable: true,
            maskClosable: true,
            width: "fit-content",
            content: (
              <img
                src={record.invoiceImage}
                onClick={() => window.open(record.invoiceImage)}
                style="max-width: 600px; max-height: 400px"
              />
            ),
          });
          // window.open('https://'+record.invoiceImage)
        } else if (record.failCause) {
          this.$message.error(record.failCause);
        }
      }
    },
    //刷新列表
    getInvoiceInfo() {
      this.$refs.searchtable.refreshTable();
    },

    //跳转到订单详情
    goOrderDetails(id) {
      let routes = this.$router.resolve({
        name: "OrderListInfo",
        query: {
          id: id,
        },
      });
      window.open(routes.href, "_blank");
    },
    //跳转到客户详情
    goCustomerDetails(id) {
      let routes = this.$router.resolve({
        name: "CustomerUserInfo",
        query: { id: id },
      });
      window.open(routes.href, "_blank");
    },
    //清空已选中
    initChosenIds() {
      this.chosenIds = [];
      this.allSelectedRows = [];
    },
  },
};
</script>
<style rel='stylesheet/less' lang='less' scoped>
.orderNum {
  color: #1890ff;
  cursor: pointer;
}
.successImg {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  .imgBox {
    width: 45px;
    height: 30px;
    flex-shrink: 0;
    margin-top: 3px;
    .table-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
